<template>
	<view class="base-page">
		<u-notify ref="uNotify"></u-notify> <!-- 通知横幅 -->
		<view class="login-title">
			<text class="login-title-type">用户登录</text>
			<text class="login-title-text">没有账号？</text>
			<text class="login-title-navi" @click="jumpRegister()">立即注册</text>
		</view>
		<view class="login-list">
			<u-form :model="userInfo" :rules="rules" ref="uForm">
				<u-form-item prop="phone">
					<u-input placeholder=请输入手机号 border="bottom" v-model="userInfo.phone" type="number" maxlength="11"
						clearable>
						<u--text text="+86" slot="prefix" margin="0 3rpx 0 0" type="tips"></u--text>
					</u-input>
				</u-form-item>
				<u-form-item prop="password">
					<u-input placeholder=请输入密码 border="bottom" v-model="userInfo.password" type="password"
						maxlength="30" clearable></u-input>
				</u-form-item>
				<u-form-item prop="captcha">
					<view class="login-list-captcha">
						<view class="login-list-captcha-input">
							<u-code-input maxlength="4" class="login-list-captcha-input-content"
								v-model="userInfo.captcha"></u-code-input>
						</view>
						<view class="login-list-captcha-image">
							<image :src="captchaUrl" class="login-list-captcha-image-content" mode="aspectFit"
								@click="getCaptcha()"></image>
						</view>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<u-gap height="100rpx" bgColor="#ffffff"></u-gap>
		<view class="login-btn">
			<u-button text="登录" type="primary" size="normal" @click="clickLogin()" :loading="showloading"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				captchaId: '', //验证码ID
				captcha64: '', //验证码base64
				captchaUrl: '',
				responseResult: [],

				//用户信息
				userInfo: {
					phone: "",
					password: "",
					captcha: "", //用户输入的验证码
				},
				
				//加载动画
				showloading: false,

				//参数信息
				option: {},

				//表单验证规则
				rules: {
					'phone': [{
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change'],
					}, {
						validator: (rule, value, callback) => {
							// 返回true表示校验通过，返回false表示不通过
							return uni.$u.test.mobile(value);
						},
						message: '手机号码格式错误',
						trigger: ['blur'],
					}],
					'password': [{
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					}, {
						min: 6,
						message: '密码不少于6个字符',
						trigger: ['blur'],
					}],
					'captcha': {
						type: 'string',
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		methods: {
			//跳转到注册界面
			jumpRegister() {
				uni.redirectTo({
					url: "/pages/login/register/register"
				})
			},
			//点击登录按钮
			clickLogin() {
				this.showloading = true
				//表单校验
				this.$refs.uForm.validate().then(res => {
					//发送登录请求
					uni.request({
						url: getApp().globalData.baseUrl+'/landlord/noLogin/login',
						method: 'GET',
						data: {
							phone: this.userInfo.phone,
							password: this.userInfo.password,
							captchaId: this.captchaId,
							inputCaptcha: this.userInfo.captcha
						},
						success: (res) => {
							this.showloading = false
							this.responseResult = res.data;
							if (this.responseResult.success == true) {
								//储存token至缓存
								uni.setStorageSync("MyToken", this.responseResult.data)
								//请求微信授权
								this.getWx()
								//重定向至首页
								uni.reLaunch({
									url: "/pages/home/home?sign=1&msg=登录成功"
								})
							} else {
								//跳errormsg横幅
								this.$refs.uNotify.warning(this.responseResult.errorMsg)
								//清空验证码输入框
								this.userInfo.captcha = ""
								//刷新验证码图片
								this.getCaptcha()
							}
						},
						fail: (err) => {
							this.$refs.uNotify.error("请求错误: 登录失败")
						},
						complete: () => {
							this.showloading = false
						}
					});
				}).catch(errors => {
					uni.$u.toast('请正确填写信息')
				})

			},
			//生成图片验证码
			getCaptcha() {
				uni.request({
					url: getApp().globalData.baseUrl+'/captcha/captchaImage',
					method: 'GET',
					success: (res) => {
						this.responseResult = res.data;
						if (this.responseResult.success == true) {
							this.captcha64 = this.responseResult.data.captchaImage;
							this.captchaId = this.responseResult.data.captchaId;
							/// 通过微信小程序自带方法将base64转为二进制去除特殊符号，再转回base64
							this.captcha64 = wx.arrayBufferToBase64(wx.base64ToArrayBuffer(this.captcha64));
							/// 拼接请求头，data格式可以为image/png或者image/jpeg等，看需求
							this.captchaUrl = "data:image/png;base64," + this.captcha64;
						} else {
							this.$refs.uNotify.warning(this.responseResult.errorMsg)
						}
					},
					fail: (err) => {
						this.$refs.uNotify.error("请求错误: 获取验证码失败")
					}
				});
			},
			//请求微信授权
			getWx() {
				wx.getUserProfile({
					desc: '用于完善会员资料',
					success: (res) => {
						//获取微信头像与昵称并存储到缓存
						uni.setStorageSync("AvatarUrl", res.userInfo.avatarUrl)
						uni.setStorageSync("NickName", res.userInfo.nickName)
					},
					complete() {
						//刷新页面
						uni.reLaunch({
							url: "/pages/home/home"
						})
					}
				})
			},
		},
		onLoad(e) {
			//获取url后参数
			this.option = e
			//加载时生成验证码图片
			this.getCaptcha();
		},
		onShow() {
			//如果是注册成功后跳转过来
			if (this.option.sign == "1") {
				this.$refs.uNotify.success(this.option.msg)
				this.option = {} /* 置空参数 */
			}
			//注册失败
			if (this.option.sign == "2") {
				this.$refs.uNotify.warning(this.option.msg)
				this.option = {} /* 置空参数 */
			}
			//如果是修改密码成功后跳转过来
			if (this.option.sign == "3") {
				this.$refs.uNotify.success("修改密码成功, 请重新登录")
				this.option = {} /* 置空参数 */
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	}
</script>

<style lang="scss">
	.base-page {
		background-color: #ffffff;
		height: 100%;
		box-sizing: border-box;
	}

	.login-title {
		display: flex;
		height: 150rpx;
		margin-left: 50rpx;
		/* 左边距 */
		margin-right: 50rpx;
		/* 右边距 */

		.login-title-type {
			font-size: 60rpx;
			font-weight: bold;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 150rpx;
			width: 450rpx;
		}

		.login-title-text {
			font-size: 20rpx;
			display: flex;
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			/* 垂直居中 */
			height: 150rpx;
			width: 100rpx;
		}

		.login-title-navi {
			font-size: 20rpx;
			display: flex;
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			/* 垂直居中 */
			height: 150rpx;
			width: 100rpx;
			color: blue;
		}
	}

	.login-list {
		background-color: #ffffff;
		margin-left: 50rpx;
		/* 左边距 */
		margin-right: 50rpx;
		/* 右边距 */
		width: 650rpx;
		
		.login-list-captcha {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 150rpx;
			width: 650rpx;
			.login-list-captcha-input {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 150rpx;
				width: 400rpx;
				.login-list-captcha-input-content {
					height: 150rpx;
					width: 400rpx;
				}
			}
			.login-list-captcha-image {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				height: 150rpx;
				width: 250rpx;
				.login-list-captcha-image-content {
					height: 150rpx;
					width: 250rpx;
				}
			}
		}
	}

	.login-btn {
		width: 650rpx;
		margin-left: 50rpx;
	}
</style>